import React, { Component } from 'react';
import { Modal, Button, Form, Input, Spin } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'

// 自定义的组件
import { DoLogin } from '../../redux/actions/login';
import NormalLoginForm from './loginForm';
import EmailNormalLoginForm from './emailLoginForm'
import ForgetPasswd from '../ForgetPasswd';

import './index.css'



// 用户登录弹窗代码
class Login extends Component {

  // 取消按钮
  handleCancel = () => {
    const obj = {
      activate: false, 
      email_login: false, 
      spinning: false, // 登录的时候,如果尚未成功会弹出,loading
      login_user_error:false, // 用户名错误
      login_email_error:false, // 用户邮箱登录错误
      login_passwd_error: false
    }
    this.props.DoLogin(obj)
  }

  // 点击右侧按钮
  handleRightBtn = () => {
    const {LoginState} = this.props
    let obj = {email_login: !LoginState.email_login}
    this.props.DoLogin(obj)
  }
  render() {
    // 获得提交的状态
    const {LoginState} = this.props
    return (
      <div>
          <Modal
            maskClosable={false}
            visible={LoginState.activate}
            title={LoginState.email_login?"邮箱登录":"账号登录"}
            onCancel={this.handleCancel}
            footer={[
              <Button 
                key="submit" 
                type="primary" 
                onClick={this.handleCancel}>
                取消
              </Button>,
              <Button
                key="submit1"
                type="primary"
                onClick={this.handleRightBtn}
              >
                {!LoginState.email_login ? '邮箱登录' : '账号登录'}
              </Button>,
            ]}
          >
            {
              LoginState.email_login
                ?
                <EmailNormalLoginForm />
                :
                <NormalLoginForm />
            }
            
          </Modal>
      </div>
    );
  }
}

export default connect(
  state => ({
    LoginState: state.LoginReducer.login
  }),
  {
    DoLogin,
  }
)(Login)
